<template>
  <div id="home-container">
    <div class="header">
      <div class="header-top">
        <div class="header-top-bg"></div>
        <!-- <div class="header-title-box">
          <div class="back-btn">
            <img src="../assets/img/ico-left-btn.png" alt="返回" />
          </div>
          <div class="right">
            <div class="header-title-text">外卖</div>
          </div>
          <div class="back-btn"></div>
        </div> -->
        <HeaderTitle title="外卖"></HeaderTitle>
        <div class="header-search">
          <img class="search-img" src="../assets/img/ico-search.png" />
          <input type="text" class="search-input" placeholder="输入你想要的东西" />
        </div>
      </div>
    </div>
    <div class="main-content">
      <div class="navigation">
        <div class="item" v-for="(item, index) in storeList">
          <img :src="item.image" alt="" />
          <div class="text">{{ item.storeName }}</div>
        </div>
      </div>
      <div class="announcement">
        <div>平台</div>
        <div>公告</div>
        <div>{{ this.announcement }}</div>
      </div>
      <div class="banner">
        <img src="../assets/img/banner1.png" alt="" />
      </div>
      <div class="sorting">
        <div>综合排序</div>
        <div class="iconfont"></div>
        <div class="item">销量</div>
        <div class="item">星级</div>
        <div class="item">距离</div>
      </div>
      <div class="goods-item" v-for="(item, index) in goodsList">
        <img src="../assets/img/cabbage-fish.png" alt="" srcset="">
        <div class="desc">
          <div class="title">{{ item.goodsName }}</div>
          <div class="grade">
            <div>{{ item.score }}分</div>
            <div>月售{{ item.sales }}</div>
          </div>
          <div class="order">
            <div>起送¥{{ item.price }} 配送¥{{ item.delivery }}</div>
            <div>{{ item.time }}分钟丨{{ item.distance }}m</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入 HeaderTitle 组件
import HeaderTitle from './common/HeaderTitle.vue'

export default {
  name: 'Home',
  components: {
    // 注册 HeaderTitle 组件
    HeaderTitle
  },
  data() {
        return {
            storeList: [],  // 店铺列表数据
            announcement: "", // 公告信息
            goodsList: [] // 商品列表数据
        }
    },
    created() {
        this.getStoreList()
        this.getAnnouncement(),
        this.getGoodsList()
    },
    methods: {
        async getStoreList() {
          // 获取店铺列表数据
          const {data: res} = await this.$http.get('/store')
          // console.log(res);
          if(res.code !== 0) return alert('请求店铺列表数据失败！')
          this.storeList = res.data
        },
        async getAnnouncement() {
          // 获取公告信息
          const {data: res} = await this.$http.get('/announcement')
          // console.log(res);
          if(res.code !== 0) return alert('请求公告数据失败！')
          this.announcement = res.data
        },
        async getGoodsList() {
          // 获取商品列表数据
          const {data: res} = await this.$http.get('/goods')
          console.log(res);
          if(res.code !== 0) return alert('请求商品列表数据失败！')
          this.goodsList = res.data
        }
    }
}
</script>

<style lang="less" scoped>
/* 头部 */
.header {
  background: linear-gradient(180deg,
      rgba(0, 116, 255, 1) 12.5%,
      rgba(133, 188, 255, 1) 5.9467rem,
      #ffffff 5.9467rem,
      #ffffff 100%);
}

.header-top {
  position: relative;
}

.header-top-bg {
  width: 10rem;
  height: 4.7733rem;
  opacity: 1;
  background: linear-gradient(180deg,
      rgba(0, 116, 255, 1) 12.5%,
      rgba(133, 188, 255, 1) 5.9467rem);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.header-title-box {
  padding: 0 0.4267rem;
  height: 1.1733rem;
  display: flex;
  align-items: center;
}

.header-title-box .back-btn {
  width: 0.7467rem;
  height: 0.7467rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-title-box .back-btn img {
  display: block;
  width: 0.2667rem;
  height: 0.5333rem;
}

.header-title-box .right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.48rem;
}

.header-search {
  width: 9.1467rem;
  height: 0.8rem;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.84);
  margin: 0.32rem 0.4267rem 0.4rem;
  position: relative;
}

.header-search .search-img {
  display: block;
  width: 0.3733rem;
  height: 0.3733rem;
  position: absolute;
  left: 0.32rem;
  top: 0.2133rem;
}

.header-search .search-input {
  position: absolute;
  display: block;
  width: 8rem;
  height: 0.8rem;
  font-size: 0.3467rem;
  font-weight: 500;
  left: 1.1467rem;
}

/* 主体内容 */
.main-content {
  background: #fff;
  width: 10rem;
  height: 100%;
  border-radius: 0.4267rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-content .navigation {
  width: 8.64rem;
  display: flex;
  margin-top: 23px;
}

/* 导航 */
.navigation .item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.navigation .item img {
  display: block;
  width: 1.28rem;
  height: 1.28rem;
}

.navigation .item .text {
  font-size: 0.32rem;
  font-weight: 500;
  color: rgba(46, 52, 58, 1);
  margin-top: 0.32rem;
}

/* 公告 */
.announcement {
  width: 9.1467rem;
  height: 0.7467rem;
  border-radius: 0.3733rem;
  background: rgba(248, 248, 248, 1);
  margin-top: 0.48rem;
  font-size: 0.32rem;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.announcement div:first-child {
  color: #000;
  margin-left: 0.32rem;
}

.announcement div:nth-child(2) {
  color: rgba(37, 136, 255, 1);
}

.announcement div:last-child {
  margin-left: 0.48rem;
  width: 6.6133rem;
  color: rgba(46, 52, 58, 1);
  /* 1.文字强制一行显示 */
  white-space: nowrap;
  /* 2.溢出部分隐藏 */
  overflow: hidden;
  /* 3.溢出部分用省略号代替 */
  text-overflow: ellipsis;
}

/* banner */
.banner {
  width: 9.1733rem;
  height: 2.4267rem;
  margin-top: 0.5333rem;
}

.banner img {
  display: block;
  width: 9.1733rem;
  height: 2.4267rem;
}

/* 排序筛选 */
.sorting {
  width: 9.1733rem;
  display: flex;
  align-items: center;
  margin-top: 0.48rem;
  margin-bottom: 0.48rem;
  color: #000;
  font-size: 0.32rem;
}

.sorting div:first-child {
  color: rgba(37, 136, 255, 1);
}

.sorting .iconfont {
  width: 0.24rem;
  height: 0.1333rem;
  margin-left: 0.1867rem;
  background-image: url(../img/ico-downward.png);
  background-size: 0.24rem 0.1333rem;
  transform: rotate(0deg);
  background-repeat: no-repeat;
}

.sorting .item {
  margin-left: 0.64rem;
}

/* 商品列表 */
.goods-item {
  width: 9.12rem;
  height: 1.8667rem;
  display: flex;
}
.goods-item .img,
.goods-item img {
  width: 1.7333rem;
  height: 1.7333rem;
}
.goods-item .desc {
  margin-left: 0.32rem;
  font-size: 0.32rem;
  font-weight: 500;
  color: rgba(144, 152, 160, 1);
  flex: 1;
}
.goods-item .desc .title {
  font-size: 0.3733rem;
  font-weight: 700;
  color: rgba(46, 52, 58, 1);
  margin-top: 0.08rem;
  width: 6.8267rem;
  /* 1.文字强制一行显示 */
  white-space: nowrap;
  /* 2.溢出部分隐藏 */
  overflow: hidden;
}
.goods-item .desc .grade {
  display: flex;
  margin-top: 0.08rem;
}
.goods-item .desc .grade div:first-child {
  color: rgba(37, 136, 255, 1);
}
.goods-item .desc .grade div:last-child {
  margin-left: 0.24rem;
}
.goods-item .desc .order {
  display: flex;
  justify-content: space-between;
  margin-top: 0.1067rem;
}
.goods-item .desc .order div:first-child {
  display: flex;
}
.goods-item .desc .order div:last-child {
  display: flex;
}
</style>
